import React, { useEffect, useState } from 'react';
import { Button, Input } from 'antd';
import dayjs from 'dayjs';
import FileUpload from './fieldupload';
import DynamicPagination from '../components/pages/DynamicPagination';
import { RollbackOutlined, SearchOutlined } from '@ant-design/icons';
import 'dayjs/locale/zh-cn';
import ExcelExport from './excelExport';
import FieldProvider from './FieldProvider';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000/';
dayjs.locale('zh-cn');

const Space = () => {
    const [fieldList, setFieldList] = useState([]);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(2);
    const [totalRecords, setTotal] = useState();
    const [exportProgress, setExportProgress] = useState(0);

    const getFieldList = async () => {
        const { data: { list, total } } = await axios.get('/kai/getfield', { params: { page: page, pagesize: pageSize } });
        setFieldList(list);
        setTotal(total);
    };

    const handlePageChange = (page, pageSize) => {
        setPage(page);
        setPageSize(pageSize);
    };

    const handleShowSizeChange = (current, size) => {
        setPage(current);
        setPageSize(size);
    };

    const handleExportProgress = (progress) => {
        setExportProgress(progress);
        console.log(`导出进度: ${progress}%`);
    };

    useEffect(() => {
        getFieldList();
    }, [page, pageSize]);

    return (
        <div style={{
            scrollbarWidth: 'none',
            overflowY: 'auto',
            margin: 'auto',
            width: '70%',
            height: '100%',
        }}>
            <div style={{ marginTop: '0.6rem', overflow: 'hidden', backgroundColor: 'white', width: '100%', height: '24%', borderRadius: '20px' }}>
                <div style={{ display: 'flex', margin: '0.6rem' }}>
                    <div style={{ marginTop:'0.1rem',width: '0.16rem', borderRadius: '0.1rem', height: '0.6rem', backgroundColor: '#3dd4a7' }}></div>
                    <div style={{ fontSize: '0.5rem', marginLeft: '0.2rem' }}>字段管理</div>
                </div>
                <div style={{ width: '100%', display: 'flex', fontSize: '0.4rem', color: '#999', margin: '1rem 0.6rem' }}>
                    <div style={{ margin: '-0.2rem 0.1rem' }}>
                        <Input style={{ height: '1rem', width: '10rem' }} placeholder="请输入关键字" />
                    </div>
                    <Button style={{ textAlign: 'center', lineHeight: '1rem', margin: '-0.2rem 0.3rem', width: '1rem', height: '1rem', background: '#5adbb5', color: 'white', borderRadius: '0.1rem' }} type="primary" icon={<SearchOutlined />} />
                    <Button style={{ textAlign: 'center', lineHeight: '1rem', margin: '-0.2rem 0.3rem', width: '1rem', height: '1rem', color: 'black' }} type="primary" color='default' variant="outlined" icon={<RollbackOutlined />} />
                </div>
            </div>
            <div style={{ marginTop: '0.6rem', overflow: 'hidden', backgroundColor: 'white', width: '100%', marginBottom: '1.25rem', borderRadius: '20px' }}>
                <div style={{ margin: '0.5rem 17rem', display: 'flex' }}>
                    <ExcelExport
                        style={{ width: '10rem', height: '10rem', marginRight: '1rem' }}
                        data={fieldList}
                        onProgress={handleExportProgress}
                    />
                    <FileUpload style={{ marginLeft: '0.5rem', width: '10rem', height: '10rem', marginBottom: '1rem' }} />
                    {/* <Button style={{ background: '#5adbb5', color: 'white', width: '1.8rem', height: '1rem', marginLeft: '0.5rem' }} variant="solid">
                        新增
                    </Button>
                    <Button style={{ marginLeft: '0.5rem', width: '2.4rem', height: '1rem' }} color="default" variant="outlined">
                        批量操作
                    </Button> */}
                </div>
                <div style={{ width: '92%', margin: '0 auto' }}>
                    <FieldProvider
                        onReload={getFieldList}
                        fieldList={fieldList}
                    />
                    <div style={{ width: '50%', margin: '0.5rem 15.5rem' }}>
                        <DynamicPagination
                            style={{ position: 'absolute', right: '1rem' }}
                            pageSize={pageSize}
                            total={totalRecords}
                            currentPage={page}
                            defaultCurrent={page}
                            defaultPageSize={pageSize}
                            showQuickJumper
                            onPageChange={handlePageChange}
                            onShowSizeChange={handleShowSizeChange}
                        />
                    </div>
                </div>
            </div>
            {/* <p>导出进度: {exportProgress}%</p> */}
        </div>
    );
};

export default Space;